<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>flax布局</title>
		<link rel="stylesheet" href="./flex.css" />
	</head>
	<body>
		<h1>flex布局</h1>
		<div>
			<h2>零、摘要</h2>
			<p>
				<a href="#flex1">1. 什么是flex</a>
				<br />
				<a href="#flex2">2. flex基本概念</a>
				<br />
				<a href="#flex3">3. flex container的属性</a>
				<br />
				<a href="#flex4">4. flex item的属性</a>
			</p>
		</div>
		<div>
			<h2 id="flex1">一、什么是flex布局</h2>
			<p>
				Flex 是 Flexible Box
				的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex
				布局一般也叫作"弹性布局"
			</p>
		</div>
		<div>
			<h2 id="flex2">二、flex基本概念</h2>
			<p>
				1.flex container:
				给元素设置{display:flex/inline-flex}属性后，该元素便成为flex
				container。
			</p>
			<p>
				2.flex item:
				给元素设置{display:flex/inline-flex}属性后，该元素的子元素成为flex
				item，孙元素不受影响。
			</p>
			<p>
				3.主轴（main axis）: 默认为水平方向。以此为前提，flex
				item在主轴所占的距离为main size。
			</p>
			<p>
				4.交叉轴（cross axis）: 默认为垂直方向。以此为前提，flex
				item在交叉轴所占的距离为cross size。
			</p>
			<img src="./flex.png" alt="flex" style="width: 100%" />
		</div>
		<!-- >3. flex container的属性 -->
		<div>
			<h2 id="flex3">三、flex container的属性</h2>
			<p>
				<a href="#flex3-1">1. display</a>
				<br />
				<a href="#flex3-2">2. flex-direction</a>
				<br />
				<a href="#flex3-3">3. flex-wrap</a>
				<br />
				<a href="#flex3-4">4. flex-flow</a>
				<br />
				<a href="#flex3-5">5. justify-content</a>
				<br />
				<a href="#flex3-6">6. align-items</a>
				<br />
				<a href="#flex3-7">7. align-content</a>
			</p>
			<h3 id="flex3-1">1. display</h3>
			<p>{display:flex}，container具有固定宽度</p>
			<div class="box">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>
				{display:inline-flex}，container不具有固定宽度，由子元素撑开。
			</p>
			<div class="box inline-box">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3 id="flex3-2">2. flex-direction</h3>
			<p>
				flex-direction : <span>row</span> || row-reverse || column ||
				column-reverse
				<br />
				决定主轴的方向
			</p>
			<p>row（默认值）</p>
			<div class="box flex-row">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>row-reverse</p>
			<div class="box flex-row2">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>column</p>
			<div class="box flex-column">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>column-reverse</p>
			<div class="box flex-column2">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3 id="flex3-3">3. flex-wrap</h3>
			<p>flex-wrap : <span>nowrap</span> || wrap || wrap-reverse</p>
			<p>nowrap（默认值）</p>
			<div class="box flex-nowrap">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<p>wrap</p>
			<div class="box flex-wrap">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<p>wrap-reverse</p>
			<div class="box flex-wrap2">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<h3 id="flex3-4">4. flex-flow</h3>
			<p>
				是flex-direction和flex-wrap的简写。
				<br />
				flex-flow:flex-direction flew-wrap
			</p>
			<p>flex-flow:row-reverse wrap</p>
			<div class="box flex-flow">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<h3 id="flex3-5">5. justify-content</h3>
			<p>
				决定flex item在主轴上的对其方式
				<br />
				justify-content: <span>flex-strat</span> || flex:end || center
				|| space-between ||space-around
			</p>
			<p>flex-start（默认值）</p>
			<div class="box flex-start">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>flex-end</p>
			<div class="box flex-end">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>center</p>
			<div class="box flex-center">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>space-between</p>
			<div class="box flex-between">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>space-around</p>
			<div class="box flex-around">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3 id="flex3-6">6. align-items</h3>
			<p>
				决定flex item在交叉轴上的对其方式
				<br />
				algin-items:<span>stretch</span> || flex-start || flex-end ||
				center || baseline
			</p>
			<p>
				stretch（默认值）：当flex
				item未设置高，或者高设置为auto时，拉伸撑满垂直方向
			</p>
			<div class="box align-stretch">
				<div class="box-item">1<span>(设置了高)</span></div>
				<div class="box-item box-tall">2</div>
				<div class="box-item box-height">3<span>(高为auto)</span></div>
				<div class="box-item box-tall">4</div>
			</div>
			<p>flex-start</p>
			<div class="box align-start">
				<div class="box-item">1</div>
				<div class="box-item box-tall">2</div>
				<div class="box-item">3</div>
				<div class="box-item box-tall">4</div>
			</div>
			<p>flex-end</p>
			<div class="box align-end">
				<div class="box-item">1</div>
				<div class="box-item box-tall">2</div>
				<div class="box-item">3</div>
				<div class="box-item box-tall">4</div>
			</div>
			<p>center</p>
			<div class="box align-center">
				<div class="box-item">1</div>
				<div class="box-item box-tall">2</div>
				<div class="box-item">3</div>
				<div class="box-item box-tall">4</div>
			</div>
			<p>baseline</p>
			<div class="box align-baseline">
				<div class="box-item">1</div>
				<div class="box-item box-tall">2</div>
				<div class="box-item">3</div>
				<div class="box-item box-tall">4</div>
			</div>
			<h3 id="flex3-7">7. align-content</h3>
			<p>
				当flex item足够多进行换行时，flex
				conotainer具有多根轴线，每一行为一根轴线。该属性用于定义所有轴线交叉轴的对齐方法。需配合flew-wrap:wrap/wrap-reverse使用。当只有一根轴线时，该属性不生效。
				<br />
				align-content: <span>stretch</span> || flex-strat || flex-end ||
				center || space-between || space-around
			</p>
			<p>stretch（默认值）： 拉伸满整行（如果没有设置height）</p>
			<div class="box flex-wrap modiy stretch">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item" style="height: 200px">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
				<div class="box-item">9</div>
			</div>
			<p>flex-start</p>
			<div class="box flex-wrap start modiy">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item" style="height: 300px">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<p>flex-end</p>
			<div class="box flex-wrap end modiy">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item" style="height: 300px">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<p>space-between</p>
			<div class="box flex-wrap between modiy">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item" style="height: 300px">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
			<p>space-around</p>
			<div class="box flex-wrap around modiy">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item" style="height: 300px">3</div>
				<div class="box-item">4</div>
				<div class="box-item">5</div>
				<div class="box-item">6</div>
				<div class="box-item">7</div>
				<div class="box-item">8</div>
			</div>
		</div>
		<!-- 4. flex item的属性 -->
		<div>
			<h2 id="flex4">四、flex item的属性</h2>
			<p>
				<a href="">1. order</a>
				<br />
				<a href="">2. flex-grow</a>
				<br />
				<a href="">3. flex-shrink</a>
				<br />
				<a href="">4. flex-basis</a>
				<br />
				<a href="">5. flex</a>
				<br />
				<a href="">6. align-self</a>
				<br />
			</p>
			<h3>1. order</h3>
			<p>
				定义item的排列顺序，值为整数（-1,0,1...），值越小排越前，<span
					>默认值为0</span
				>
			</p>
			<div class="box order">
				<div class="box-item">1</div>
				<div class="box-item">2<span>(order:0)</span></div>
				<div class="box-item">3<span>(order:-1)</span></div>
				<div class="box-item">4</div>
			</div>
			<h3>2. flex-grow</h3>
			<p>
				定义item的放大比例（存在剩余空间时有效），<span>默认值为0</span>
				<br />
				当同级的所有item的flex-grow属性值均为1时，会平分剩余空间，即每个item分到1/n的空间
				同理，当某个item的flex-grow属性值为2时，分到的空间为2/n。
			</p>
			<div class="box grow">
				<div class="box-item">1</div>
				<div class="box-item">2<span>(flex-grow:1)</span></div>
				<div class="box-item">3<span>(flex-item:2)</span></div>
				<div class="box-item">4</div>
			</div>
			<h3>3. flex-shrink</h3>
			<p>
				定义item的缩小比例，剩余空间不足时，缩小item以全部显示。<span
					>默认值为1</span
				>
				值为0，即使空间不足也不缩小。 负值不生效。
			</p>
			<div class="box shrink">
				<div class="box-item">1</div>
				<div class="box-item">2<span>(shrink:0)</span></div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3>4. flex-basis</h3>
			<p>
				定义item的main
				size。优先级比width/height高。<span>默认值为auto</span>，即元素原本width/height的值
				<br />
				当主轴为水平方向时，该属性定义item的宽。
			</p>
			<div class="box basis">
				<div class="box-item">1</div>
				<div class="box-item">2<span>(flex-basis:400)</span></div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3>5. flex</h3>
			<p>
				一种属性的简写形式，flex: flex-grow flex-shrink flex-basis
				<br />
				<span>默认值为 0 1 auto</span>
				有几种特殊值: auto/none/1
			</p>
			<p>flex:1,相当于1 1 0%</p>
			<div class="box flex">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<p>flex:auto,相当于1 1 auto</p>
			<div class="box flex-auto">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
			</div>
			<p>flex:none,相当于0 0 auto</p>
			<div class="box flex-none">
				<div class="box-item">1</div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<h3>6. align-self</h3>
			<p>
				定义单个item在交叉轴上的排列方法，可以覆盖父元素的align-items属性。
				<br />
				<span>默认值为父元素的align-items属性值:auto/stretch</span>
			</p>
			<p>align-self:auto/flex-start/flex-end/center/baseline/stretch</p>
			<div class="box align-center bigbox">
				<div class="box-item self-start">1<span>flex-start</span></div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
			<div class="box align-center bigbox">
				<div class="box-item self-end">1<span>flex-end</span></div>
				<div class="box-item">2</div>
				<div class="box-item">3</div>
				<div class="box-item">4</div>
			</div>
		</div>
		<!-- 返回顶部按钮 -->
		<div id="backbtn" class="backbtn">返回顶部</div>
		<div class="footer">
			<a href="https://blog.csdn.net/MarronBan" target="_blank"
				>By MarronBan</a
			>
		</div>
		<script>
			const DEFALTHEIGHT = 850
			const backbtn = document.getElementById("backbtn")
			backbtn.addEventListener("click", (e) => {
				document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
			})
			window.onscroll = () => {
				if (
					document.body.scrollTop > DEFALTHEIGHT ||
					document.documentElement.scrollTop > DEFALTHEIGHT
				) {
					backbtn.style.display = "block"
				} else {
					backbtn.style.display = "none"
				}
			}
		</script>
	</body>
</html>
